<script setup lang="ts">
import {reactive} from "vue";

let newsList = reactive([
  {
    id: 1,
    title: '新闻标题1',
    content: "新闻标题详情内容1"
  },
  {
    id: 2,
    title: '新闻标题2',
    content: "新闻标题详情内容2"
  },
  {
    id: 3,
    title: '新闻标题3',
    content: "新闻标题详情内容3"
  },
  {
    id: 4,
    title: '新闻标题4',
    content: "新闻标题详情内容4"
  }
])


</script>

<template>

  <div class="news">
    <div class="newsList">
      <!-- to+字符串+pramas传参写法：传递方-->
<!--      <RouterLink v-for="news in newsList"-->
<!--                  :key="news.id"-->
<!--                  :to="`/news/detail/${news.id}/${news.title}/${news.content}`">-->
<!--        {{ news.title }}-->
<!--      </RouterLink>-->

      <!-- to+对象+params+name传参写法：传递方-->
            <RouterLink v-for="news in newsList"
                        :key="news.id"
                        :to="{
                          name: 'detail', // 路由名称
                          params: { // params参数
                            id: news.id,
                            title: news.title,
                            content: news.content
                          }
                        }">
              {{ news.title }}
      </RouterLink>


    </div>
    <div class="container">
      <RouterView/>
    </div>
  </div>
</template>

<style scoped>
.news {
  display: flex;
}

.news .newsList {
  flex: 1;
}

.news .newsList a {
  display: block;
  color: #333;
  text-decoration: none;
  margin: 10px 0;
}

.news .container {
  flex: 2;
  border: 1px solid rgba(157, 99, 228);
  height: 200px;
}
</style>
